<template>
    <div class="xm-user">
        <div class="user-info">
            <img class="avatar" :src="userInfo.avatar" />
            <span>{{ userInfo.username }}</span>
        </div>
        <div class="grid-list">
            <van-grid clickable :column-num="3">
                <van-grid-item
                    icon="home-o"
                    text="历史记录"
                    @click="fn(0)"
                    to="/home"
                />
                <van-grid-item
                    icon="search"
                    text="我的收藏"
                    @click="fn(1)"
                    to="/home/collect"
                />
                <van-grid-item
                    icon="search"
                    text="我的点赞"
                    @click="fn(2)"
                    to="/home/like"
                />
            </van-grid>
        </div>
        <div class="nav-list">
            <van-cell title="推荐分享" is-link />
            <van-cell title="意见反馈" is-link />
            <van-cell title="关于我们" is-link />
            <van-cell title="退出登录" is-link @click="logout" />
        </div>
    </div>
</template>

<script>
import { USER_INFO_API } from '@/constant/api'
import bus from '@/utils/bus'
import HttpTools from '@/utils/http'
import { USERINFO_KEY } from '@/utils/key'

export default {
  name: 'XmUser',
  data () {
    return {
      userInfo: {
        avatar: '',
        id: '',
        username: '',
        createdAt: '',
        updatedAt: ''
      }
    }
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    getUserInfo () {
      HttpTools.get(USER_INFO_API).then((res) => {
        this.userInfo = res.data
      })
    },
    logout () {
      window.localStorage.removeItem(USERINFO_KEY)
      this.$router.replace('/login')
    },
    fn (index) {
      bus.$emit('activeChange', index)
    }
  }
}
</script>

<style lang="less" scoped>
.xm-user {
    height: 100%;
    background-color: #f5f5f5;
    padding: 10px;

    .user-info {
        display: flex;
        align-items: center;
        margin-top: 6px;
        img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin-right: 20px;
        }
        span {
            font-weight: 600;
        }
    }

    .grid-list {
        margin: 16px 0;
    }
}
</style>
